<template>
    <div>
        <span class="font-3 xuanze-sex text-align-c">Hi，请选择您的性别</span>
        <span class="font-22 xuanze-sex text-align-c">我们将为您推荐最适合您的陪玩师</span>
        <div class="sex-img-box">
            <span class="fl sex-img-span text-align-c sex-img-span1" @click="select_sex()">
                <img class="img-mon" src="../../assets/image/img_male.png" alt="">
                <em class="color-9 font-3">男生<img class="icon_select" src="../../assets/image/icon_select.png" alt="" srcset=""></em>
            </span>
            <span class="fl sex-img-span text-align-c sex-img-span2" @click="select_sex()">
                <img class="img-mon" src="../../assets/image/img_female.png" alt="">
                <em class="color-9 font-3">女生<img class="icon_select" src="../../assets/image/icon_select.png" alt="" srcset=""></em>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        select_sex(){
            this.$router.push({
                path:'sex'
            })
        }
    }
}
</script>

<style scoped>
.xuanze-sex{
    display: block;
    height: .5rem;
    line-height: .5rem;
}
.sex-img-box{
    padding-top: 1.5rem;
}
.xuanze-sex:nth-child(1){
    padding-top: 4rem;
    letter-spacing: .05rem;
}
.sex-img-span{
    width: 40%;
    display: block;
}
.sex-img-span em{
    display: block;
    height: .6rem;
    line-height: .6rem;
}
.sex-img-span1{
    padding-left: 10%;
}
.sex-img-span2{
    padding-right: 10%;
}
.sex-img-span .img-mon{
    width: 1.5rem;
}
.icon_select{
    width: .3rem;
    line-height: .6rem;
    padding-left: .1rem;
    margin-top: .1rem;
}
</style>
